<template>
  <de-container class="pa-5">
    <template v-if="view === 'config'">
      <RoleConfig :role-id="configObject.roleId" :visible="view === 'config'" @hide="view = 'list'" />
    </template>
    <template v-else>
      <avue-crud
        ref="crud"
        v-model="form"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :before-open="beforeOpen"
        :search.sync="searchForm"
        @on-load="loadListData"
        @search-change="onSearchChange"
        @search-reset="onSearchReset"
        @row-save="onRowSave"
        @row-update="onRowUpdate"
        @row-del="onRowDelete"
        @refresh-change="onRefresh"
        @selection-change="onSelectionChange"
        @filter-change="onFilterChange"
        @sort-change="onSortChange"
      >
        <template slot="menuLeft" slot-scope="{ size }">
          <el-button icon="el-icon-delete" :disabled="selection.length <= 0" :size="size" @click="onBatchDeleteClick">
            批量删除
          </el-button>
        </template>
        <!-- 功能按钮 -->
        <template slot="menu" slot-scope="scope">
          <el-button type="text" size="mini" icon="el-icon-setting" @click.native="onConfigClick(scope.row)">
            菜单权限
          </el-button>
        </template>
      </avue-crud>
    </template>
  </de-container>
</template>

<script>
import moment from 'moment'
import {
  requestRolePage,
  requestRoleCreate,
  requestRoleUpdate,
  requestRoleDelete,
  requestRoleBatchDelete,
} from '@/api/system/role'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'
import RoleConfig from './components/config'

const DEFAULT_LIST_MAP_FUNC = (item) => {
  const ret = item

  if (item.createTime) {
    ret.createTime = moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss')
  }
  return ret
}

export default {
  name: 'RoleList',
  components: { RoleConfig, DeContainer },
  mixins: [ListMixin],
  data() {
    return {
      listApi: requestRolePage,
      createApi: requestRoleCreate,
      updateApi: requestRoleUpdate,
      deleteApi: requestRoleDelete,
      batchDeleteApi: requestRoleBatchDelete,
      listMapFunc: DEFAULT_LIST_MAP_FUNC,
      tableOption: {
        menuWidth: 220,
        addTitle: '新增角色',
        editTitle: '编辑角色',
        viewTitle: '查看角色',
        searchMenuPosition: 'left',
        column: [
          {
            label: '角色名称',
            prop: 'name',
            search: true,
            maxlength: 50,
            rules: [
              { required: true, message: '请输入角色名称' },
              { max: 50, message: '最多50个字' },
            ],
            span: 24,
            align: 'left',
            overHidden: true,
            showWordLimit: true,
          },
          {
            label: '描述',
            prop: 'description',
            type: 'textarea',
            maxlength: 200,
            showWordLimit: true,
            span: 24,
            hide: true,
            showColumn: false,
          },
          {
            label: '创建时间',
            prop: 'createTime',
            span: 24,
            editDisplay: false,
            addDisplay: false,
            viewDisplay: false,
          },
        ],
      },

      view: 'list',
      configObject: {},
      dataPermissionVisible: false,
      currentDataPerssion: {},
    }
  },
  methods: {
    beforeOpen(done, type) {
      if (type === 'add') {
        this.form.tenantId = 0
      }
      done()
    },
    onConfigClick(row) {
      this.configObject = row
      this.view = 'config'
    },
    openDialog(ref) {
      this.$refs[ref].init()
    },
    onOpenDataPermission(row) {
      this.currentDataPerssion = row
      this.dataPermissionVisible = true
    },
  },
}
</script>

<style lang="scss"></style>
